JavaScript Modules入門

2023 iThome 鐵人賽

DAY 7

Modern Web

前端開發之那些我會的與我不會的技術系列第 7 篇

15th鐵人賽

ss95159

2023-09-22 19:26:01

466 瀏覽

分享至

JavaScript modules是什麼?

JavaScript modules又稱 ES modules，是將程式模組化的技術。

在最早之前我們開發網頁應用程式，使用一大包JS或者多個JS載入到網頁，隨著網頁應用越來越複雜，彼此的變數命名衝突也越容易發生，程式也越來越不好維護。衍生出模組化的技術，從iife、requireJs、commonJs到瀏覽器支援的es modules，可以讓我們寫出容易維護、可讀、可擴展的程式。以下我們將介紹es modules的使用方式。

使用

如果要在HTML使用es modules，要在script tag上加上type屬性為moduld

<script type="module" src="xxx.js"></script>
<!-- or -->
<script type="module">
	// 程式內容
</script>

export & import

export語法可以幫助我們模組化程式碼，提供其他檔案import使用，它的語法有兩種，一種是default export，另一種是named export。可以把它想成程式匯入匯出的功能，然後esm提供幾種匯出與匯入的方式。

default export：

一個檔案只能有一個default export，把要export接在export default後面

//a.js

// 接命名function
export default function doSomething(){}

// 接匿名function
export default function (){}

// function有hoisting可在export前後宣告
export default doSomething;
function doSomething() {}

//如果是變數就需要在export前宣告賦值
const someVar = 123;
export default someVar;

import

import 自訂變數 from 'export路徑'

自訂變數命名不一定要是export檔案原本的變數名稱

// funciton範例
import doSomething1 from 'a.js'
doSomething1(); // import進來後可以直接使用

// 變數範例
import myVar from 'a.js'
console.log(myVar) // console 123

//取別名
import { default as myFunction } from './a.js'

named export：

有命名的export，在import的時候就要以export的命名import，同個檔案可以多個named export。

// b.js
export const a = 1;
// export多個
export { a, b, doSomething }
const a = 1;
const b = 2;
function doSomething() {}

import

import { 變數名稱 } from 'export路徑'

import { a, b, doSomething } from 'b.js'
console.log(a, b) // console 1 2
doSomething() // 直接呼叫使用function

// 取別名
import { a as myVar} from 'b.js'
console.log(myVar) // console 1
console.log(a) // a is not defined

// import所有named export，並賦予一個模組名稱
import * as obj from 'b.js'
console.log(obj.a) // console 1
console.log(obj.b) // console 2
obj.default // 如果b.js檔案有default export也可以使用此方式

Re-export

就是export其他的export，這個就比較沒這麼常用到

// a.js
export const a = 1

// b.js
export const b = 2

// app.js
export * from 'a.js'
export * from 'b.js'

// index.js
import { a, b } from 'app.js'
console.log(a) // console 1
console.log(b) // console 2

動態Import

import('路徑').then((module) => {})

// a.js
export default function aFn() {}
export const aVar = 123;

// main.js
	// 方法1
import('./a.js').then((module) => {
	console.log(module.default) // console aFn(){}
	console.log(module.aVar) // console 123
})
	// 方法2
const module = await import('./a.js')
console.log(module.default) // console aFn(){}
console.log(module.aVar) // console 123